<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/one.css" />
         <script src="../js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="main">
			<header>
				<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/one.html">
					<div id="logn">
					</div>
				</a>
				<div id="top-nav">
					<p>中国</p>
					<div id="nav-up-right">
						<select name="">
							<option value="defalut">Select Language</option>
							<option value="en">English</option>
							<option value="cn">Chinese</option>
						</select>
						<span> &nbsp;&nbsp;|&nbsp; </span>
						<a href="###">进入全球官网</a>
					</div>
					<ul id="nav-contain">
						<li id="nav-news">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/news.html">新闻动态</a>
						</li>
						<li id="nav-food">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/food.html">美食与营养</a>
							<ul id="nav-food-menu">
								<li>
									<a href="">超值 Value</a>
								</li>
								<li>
									<a href="">经典 Classics</a>
								</li>
								<li>
									<a href="">低脂 Low Fat</a>
								</li>
								<li>
									<a href="">精选 Premlum</a>
								</li>
								<li>
									<a href="">百味卷 Wrap</a>
								</li>
								<li>
									<a href="">沙拉 Salad</a>
								</li>
								<li>
									<a href="">聚餐服务 Catering</a>
								</li>
								<li>
									<a href="">饮料喝小食 Drinks & Sides</a>
								</li>
								<li>
									<a href="">早餐 BREAKFAST</a>
								</li>
								<li>
									<a href="">营养 Nutrition</a>
								</li>
								<li>
									<a href="">如何点餐 How To Order</a>
								</li>
							</ul>
						</li>
						<li id="nav-go">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/alie.html">加盟流程</a>
						</li>
						<li id="nav-us">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/us.html">关于我们</a>
						</li>
						<li id="nav-search">
							<a href="">快餐位置查询</a>
						</li>
					</ul>
				</div>
			</header>
			<div id="middle-food">
				      <div id="middle-food-left">
				      	<img id="first" src="../img/8D6DF39D-DA23-43B0-AF9C-F8CE628BA66A.png"/>
				      	<img id="value-itallan-img" src="../img/66E21F29-6DA3-4A74-AEBE-8D2C97136EB0.png"/>
				      	<img id="value-blt-img" style="display: none;" src="../img/5A4B5245-F8DD-4FD6-A711-CA9F8A066B81.png"/>
				      	<img id="value-ham-img" style="display: none;" src="../img/D0E566D2-376D-4E9A-AE72-701635C84263.png"/>
				      	<img id="value-veg-img" style="display: none;" src="../img/CED23326-E9D7-432A-B2DA-74DCFC7889A6.png"/>
				      	<img id="class-itallan-img" style="display: none;" src="../img/66E21F29-6DA3-4A74-AEBE-8D2C97136EB0.png"/>
				      	<img id="class-chicken-img" style="display: none;" src="../img/61B32B79-1B96-4DA5-A7D2-37DB858FF927.png"/>
				      	<img id="class-meat-img" style="display: none;" src="../img/7440A995-B42B-4D26-9CA3-4EEC0A39A486.png"/>
				      	<img id="class-tur-img" style="display: none;" src="../img/EC6E3140-06D8-4796-8416-2A63DA4351A9.png"/>
				      	<img id="class-Japan-img" style="display: none;" src="../img/6CEBAC65-E87E-42F8-AB80-58F1F44A7083.png"/>
				      	<img id ="low-beef-img" style="display: none;" src="../img/F0AC640D-95CF-4223-A657-63A9167899DA.png"/>
				      	<img id ="low-club-img" style="display: none;" src="../img/CE939C05-0081-4EA6-8AD5-58F955E0D319.png"/>
				      	<img id ="p-fish-img" style="display: none;" src="../img/B9939ACB-9700-4D8E-872F-E9E3C7D0615A.png"/>
				      	<img id ="p-melt-img" style="display: none;" src="../img/0B11A059-D979-46AD-928F-0E39172DD63F.png"/>
				      	<img id ="p-steak-img" style="display: none;" src="../img/BCCEA35F-EC33-4259-94C8-7B0FB3546FBF.png"/>
				      	<img id ="food-wrap-img" style="display: none;" src="../img/F655551D-35F6-4F14-A359-352C33985EE0.png"/>
				      	<img id ="sala-img" style="display: none;" src="../img/7734E651-6552-43B5-A56C-7B7983404864.png"/>
				      	<img id ="sandwich-img" style="display: none;" src="../img/FA27F65D-8EA8-47F8-841B-2502D772323F.png"/>
				      	<img id ="cookie-img" style="display: none;" src="../img/A8CD9DD1-E64C-4B70-9C24-1E6CDADE9D52.png"/>
				      	<img id ="big-sandwich-img" style="display: none;" src="../img/C45845C8-80EB-42AA-B11C-527266BE489D.png"/>
				      	<img id ="side-img" style="display: none;" src="../img/593930BB-5996-4A1D-ADCE-22CCAC3B8820.png"/>
				      	<img id ="breakfast-img" style="display: none;" src="../img/2ADC0C6C-D4A5-4AC2-B685-3DF7CBA54A11.png"/>
				      	
				      </div>
				     <div id="middle-food-right">
				     	<ul id="middle-food-menu">
								<li>
									超值 Value
									<ul>
										<li id="value-itallan">意大利香辣 Splcy Itallan</li>
										<li id="value-blt">培根 B.L.T</li>
										<li id="value-ham">火腿 Ham</li>
										<li id="value-veg">新鲜蔬菜 Veggle Dellte</li>
									</ul>
								</li>
								<li>
									经典 Classics
									<ul>
										<li id="class-itallan">意大利经典 Italian B.M.T.™</li>
										<li id="class-meat">意大利香肠 Italian Sausage</li>
										<li id="class-chicken">香烤鸡排 Roasted Chicken</li>
										<li id="class-tur">火鸡胸 Turkey Breast</li>
										<li id="class-Japan">日式照烧鸡 Chicken Teriyaki</li>
									</ul>
								</li>
								<li>
									低脂 Low Fat
									<ul>
										<li id="low-ham">火腿 Ham</li>
										<li id="low-tur">火鸡胸 Turkey Breast</li>
										<li id="low-chicken">香烤鸡排 Roasted Chicken</li>
										<li id="low-beef">香烤牛肉 Roast Beef</li>
										<li id="low-club">百味俱乐部 Subway Club™</li>
									</ul>
								</li>
								<li>
									精选 Premlum
									<ul>
										<li id="p-fish">金枪鱼 Tuna</li>
										<li id="p-melt">香热奇士 Subway Melt</li>
										<li id="p-beef">香烤牛肉 Roast Beef</li>
										<li id="p-steak">奇士牛排 Steak & Cheese</li>
										<li id="p-club">百味俱乐部 Subway Club™</li>
									</ul>
								</li>
								<li id="food-wrap">
									百味卷 Wrap
								</li>
								<li id="sala">
									沙拉 Salad
								</li>
								<li>
									聚餐服务 Catering
									<ul>
										<li id="sandwich">三明治拼盘 Sandwich Platter</li>
										<li id="cookie">甜饼拼盘 Cookie Platter</li>
										<li id="big-sandwich">巨型三明治 Giant Sub</li>
									</ul>
								</li>
								<li id="side">
									饮料喝小食 Drinks & Sides
								</li>
								<li id="breakfast">
									早餐 BREAKFAST
								</li>
								<li>
									营养 Nutrition
									<ul>
										<li>营养问与答 FAQ</li>
									</ul>
								</li>
								<li id="how">
									如何点餐 How To Order
								</li>
							</ul>
				     </div>
				</div>
			
			<div id="main-down">
				<ul>
					<li>
						<a id="down-location" href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/two.html"></a>
					</li>
					<li>
						<a id="down-get" href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/three.html"></a>
					</li>
					<li>
						<a id="down-active" href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/four.html"></a>
					</li>
					<li>
						<a id="down-sina" href="http://weibo.com/subwayrestaurantcn"></a>
					</li>
					<li>
						<a id="down-wechat" href=""></a>
					</li>
					<div id="wechat-img">
						<img src="../img/38A.png" />
					</div>
				</ul>
				<p>主页 | 菜单/营养 | 如何加盟 | 关于我们 | 快餐店位置查询 <br /> 联系我们 | 使用条款 | 隐私权政策 | SUBWAY Partners™ <br /><br /> SUBWAY® is a Registered Trademark of Subway IP Inc. <br /> ®2016 Subway IP Inc.</p>
			</div>
</div>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var navFood = document.getElementById("nav-food")
			var navFoodMenu = document.getElementById("nav-food-menu")
			var navContain = document.getElementById("nav-contain")
            var main = document.getElementById("main")
			var downWechat = document.getElementById("down-wechat")
			var haha = document.getElementById("haha")
			var wechatImg = document.getElementById("wechat-img")
			var middleFood = document.getElementById("middle-food")
			var middleFoodMenu = document.getElementById("middle-food-menu")
			var bigLiArr = document.querySelectorAll("#middle-food-menu>li")
			var smallUlArr = document.querySelectorAll("#middle-food-menu>li>ul")
			var middleFoodLeft = document.getElementById("middle-food-left")
			var z = 0
			var b = 0
			console.log(main.offsetHeight)	
			navContain.onmouseover = function(ev) {
				ev.target.style.color = "yellow"
			}
			navContain.onmouseout = function(ev) {
				ev.target.style.color = "white"
			}

			navFood.onmouseenter = function() {
				navFoodMenu.style.display = "block"
			}
			navFood.onmouseleave = function() {
				navFoodMenu.style.display = "none"
			}
			downWechat.onmouseover = function() {
				wechatImg.style.display = "block"
				wechatImg.style.top = main.offsetHeight - 250 + "px"
			}
			
			downWechat.onmouseout = function() {
				wechatImg.style.display = "none"
			}
			window.onload = function () {
				middleFood.style.height = middleFoodLeft.offsetHeight + 30 + "px"
			}
			for (var i = 0;i < smallUlArr.length;i++) {
				smallUlArr[i].style.display = "none"
			}
			for (var i = 0;i < bigLiArr.length;i++) {			
					bigLiArr[i].onclick = function (ev) {						
					var a =	ev.target.children[0].style.display
					if (a == "block" ) {
						middleFood.style.height = middleFood.offsetHeight - b + "px"
						ev.target.children[0].style.display = "none"	
						this.style.color = "rgb(125,200,84)"
					}else{
						this.style.color = "rgb(52,154,72)"
						ev.target.children[0].style.display = "block"
						b = ev.target.children[0].offsetHeight
						middleFood.style.height = middleFood.offsetHeight + b + "px"
					}
					
			   }	
			}
			function imgClick (one,two) {
				
			$(one).click(function () {
				$("#middle-food-left>img").css({
					display : "none"
				})
				$(two).css({
					display : "block"
				})
				$(middleFood).css({
					height : $(two).height() + 30 
				})
			})
     }
			imgClick("#value-itallan","#value-itallan-img")
			imgClick("#value-blt","#value-blt-img")
			imgClick("#value-ham","#value-ham-img")
			imgClick("#value-veg","#value-veg-img")
			imgClick("#class-itallan","#class-itallan-img")
			imgClick("#class-meat","#class-meat-img")
			imgClick("#class-chicken","#class-chicken-img")
			imgClick("#class-tur","#class-tur-img")
			imgClick("#class-Japan","#class-Japan-img")
			imgClick("#low-ham","#value-ham-img")
			imgClick("#low-tur","#class-tur-img")
			imgClick("#low-chicken","#class-chicken-img")
			imgClick("#low-beef","#low-beef-img")
			imgClick("#low-club","#low-club-img")
			imgClick("#p-fish","#p-fish-img")
			imgClick("#p-melt","#p-melt-img")
			imgClick("#p-club","#low-club-img")
			imgClick("#p-beef","#low-beef-img")
			imgClick("#p-steak","#p-steak-img")
			imgClick("#food-wrap","#food-wrap-img")
			imgClick("#sala","#sala-img")
			imgClick("#sandwich","#sandwich-img")
			imgClick("#cookie","#cookie-img")
			imgClick("#big-sandwich","#big-sandwich-img")
			imgClick("#side","#side-img")
			imgClick("#breakfast","#breakfast-img")
			imgClick("#how","#first")
			
		</script>

	</body>

</html>
 